<template>
	<z-paging-swiper :fixed="false" :swiperStyle="props.styleObj">
		<template #top>
			<slot name="top"></slot>
			<div class="swiper-tabs" style="border-bottom: 1rpx solid #E3E3E3;padding-bottom: 8rpx;">
				<u-tabs :scrollable="props.scrollable" :current="conf.current" :list="props.tabs"
					@click="onchange($event.index)" :lineColor="props.lineColor" :lineWidth="props.lineWidth"
					:activeStyle="props.activeStyle" :inactiveStyle="props.inactiveStyle" />
			</div>
		</template>
		<template #bottom>
			<slot name="bottom"></slot>
		</template>
		<swiper style="height: 100%;" :current="conf.current"
			@change="$event.detail.source == 'touch' && onchange($event.detail.current)">
			<swiper-item v-for="(item, index) in props.tabs" :key="index">
				<xi-list ref="$paging" :query="props.query" :auto="false" @load="is_load[conf.current](true)">
					<template #default="{ data }">
						<slot :data="data" :$index="index"></slot>
					</template>
				</xi-list>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import {
		watch
	} from 'vue';

	let props = defineProps({
		tabs: {
			type: Array,
			default: () => [],
		},
		query: {
			default: () => {
				return () => {}
			},
		},
		scrollable: {
			type: Boolean,
			default: true,
		},
		modelValue: {
			default: () => '',
		},
		styleObj: {
			default: () => ({
				height: '100%',
			}),
		},
		lineColor: {
			default: '',
		},
		lineWidth: {
			default: 20
		},
		activeStyle: {
			default: ''
		},
		inactiveStyle: {
			default: '',
		},
		auto: {
			type: Boolean,
			default: true,
		},
	});

	let emits = defineEmits([
		'update:modelValue',
	]);

	let conf = Vue.reactive({
		current: 0,
	})

	// Vue.watch(
	// 	() => conf.current,
	// 	() => {
	// 		$paging.value[conf.current].reload();
	// 	}, {
	// 		deep: true,
	// 	}
	// )
	let $paging = Vue.ref(null)

	let is_load = Vue.computed(() => {
		let arr = [];
		for (let i = 0; i < props.tabs.length; i++) {
			arr.push(xaoi.ele())
		}
		return arr;
	});
	let is_first = {};

	function onchange(index) {
		if (index === conf.current) return;
		is_update = true;
		conf.current = index;
		emits('update:modelValue', props.tabs[index].value)
		if (is_first[conf.current]) return;
		is_first[conf.current] = true;
		$paging.value[conf.current].reload();
		is_update = false;
	}

	Vue.onMounted(() => {
		if (!props.auto) return;
		is_first[conf.current] = true;
		$paging.value[conf.current].reload();
	})

	conf.current = props.tabs.findIndex(item => item.value === props.modelValue);
	if (conf.current === -1) conf.current = 0;

	let is_update = false;
	Vue.watch(() => props.modelValue, () => {
		if (is_update) return;
		conf.current = props.tabs.findIndex(item => item.value === props.modelValue);
		if (conf.current === -1) conf.current = 0;
	});

	defineExpose({
		async reload() {
			conf.current = props.tabs.findIndex(item => item.value == props.modelValue);
			if (conf.current === -1) conf.current = 0;
			// is_first = [];
			// is_first[conf.current] = true;

			// await is_load.value[conf.current]()

			$paging.value[conf.current].reload();
		},
	})
</script>

<style lang="scss" scoped>
	.swiper-tabs {
		background-color: #fff;
	}
</style>